@import "../shared/helper";

body {
  background: #010310;
}

.home {
  flex: 1;
  display: flex;
  flex-direction: column;
  color: #ddeeff;
}

.home > header {
  height: px(98);
  background: transparent;
  text-shadow: 0 0 px(3) white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 1.5rem;
  padding-right: 1.5rem;

  h1 {
    font-size: px(48);
    color: white;
  }

  .clock {
    text-align: center;
  }
}

.home > footer {
  background: transparent;
  height: px(66);
  margin: px(20) 0 1px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.home > main {
  padding-top: px(30);
  flex: 1;
  display: grid;
  grid-template-areas:
  "box1 box2 box4 box5"
  "box3 box3 box4 box5";
  grid-template-columns: px(416) px(361) px(811) px(747);
  grid-template-rows: px(755) px(363);
  grid-column-gap: px(28);
  grid-row-gap: px(28);

  .section1 {grid-area: box1;}
  .section2 {grid-area: box2;}
  .section3 {grid-area: box3;}
  .section4 {grid-area: box4;}
  .section5 {grid-area: box5;}

  .section1, .section2, .section3, .section4, .section5{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}

main .displayBlock {
  display: flex;
  flex-direction: column;
  align-items: center;

  h2 {
    flex-shrink: 0;
    border: 2px solid #0a5299;
    border-top: 0;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    padding: px(10) px(28);
    font-size: px(22);
    line-height: px(22);
    text-shadow: 0 0 px(3) white;
  }

  .chart {
    flex: 1;
    width: 100%;
    overflow: hidden;
  }
}

main .公演次数 {height: px(330);}

main .总选排名 {height: px(400);}

main .吸粉途径 {
  height: px(363);

  .legend {
    margin-bottom: px(10);
    margin-right: px(10);
  }
}

main .直播时段 {height: px(363);}

main .大事记{
  height: px(363);
  .chart {
    overflow:hidden;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    > table {
      border-collapse: collapse;
      th, td {
        border: 1px solid #0e325f;
        padding: px(4) px(48);
      }

      thead th {
        font-size: px(22);
        box-shadow: inset 0 0 px(60) 0 #1f3d85;
      }

      tbody td {
        font-size: px(16);
        background: #1c2456;
      }
    }
  }
}

main .所在地 {
  height: px(755);
  background: transparent;
}

main .年龄分布 {
  height: px(317);
  display: flex;
  flex-direction: column;
  .chartGroup {
    flex: 1;
    display: flex;
    width: 100%;
    overflow: hidden;
    .genderPie, .agePie{
      flex: 1;
      display: flex;
      flex-direction: column;
      .legend{
        flex-shrink: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        margin: 0 px(10) px(10) px(10);
      }
    }
  }
}

main .粉丝数量 {
  height: px(317);
}

main .喜爱曲目 {
  height: px(455);
  position: relative;
  .legend {
    position: absolute;
    bottom: px(20);
    right: px(40);
    display: flex;
    flex-direction: column;
  }
}

main .握手会 {
  height: px(363);
  background: transparent;
  .infoWrapper{
    width: 100%;
    flex:1;
    display: flex;
    justify-content: center;
    align-items: center;
    .握手, .签名 ,.合影 {
      flex:1;
      height: px(140);
      margin: px(30);
      background: transparent;
      border: 1px solid #073E78;
      border-radius: 3px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .count {
        font-size: px(72);
      }
      > h3 {
        font-size: px(24);
        color: #aaaaaa;
      }
    }
  }
}

.bordered {
  border: 2px solid #0764bc;
  border-radius: 4px;
  position: relative;
  background: #0c1139;

  &::before {
    content: '';
    pointer-events: none;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    border-radius: 4px;
    box-shadow: 18px 0 1px -16px #0e325f,
    -18px 0 1px -16px #0e325f,
    0 18px 0 -16px #0e325f,
    0 -18px 0 -16px #0e325f,
    10px 0 0 -8px #0d4483,
    -10px 0 0 -8px #0d4483,
    0 10px 0 -8px #0d4483,
    0 -10px 0 -8px #0d4483,
    0 0 0 2px #0764bc;
  }
}

.legend {
  .legendItem {
    display: inline-block;
    margin-left: px(10);
    font-size: px(12);
    height: px(20);
    .colorBar {
      display: inline-block;
      vertical-align: middle;
      height: px(14);
      width: px(18);
      border-radius: px(2);
      margin-right: px(10);
    }
    .text{
      vertical-align: middle;
    }
  }
}
